<template>
  <AppPage class="bg-[#f8f8f8]" article-class="" header-class="bg-[#3d8ffd]">
    <template #center>
      <span class="c-white">订单详情</span>
    </template>
    <div class="pb-70">
      <div class="px-15 pt20 pb-20 bg-theme">
        <div class="c-white text-15">
          {{orderDetail.order_info.order_status}} ----
          {{orderDetail.order_info && orderDetail.order_info.order_status && orderStatus(orderDetail.order_info.order_status,orderDetail.order_info.pay_status)}}
        </div>
        <div class="c-white text-12">
          {{orderDetail.order_info && orderDetail.order_info.order_status && orderDetailStatusTips(orderDetail.order_info.order_status,orderDetail.order_info.pay_status)}}
        </div>
        <div class="" v-if="orderDetail.order_info.pay_status === 0">
          <div class="px-4 bg-white rounded-6 mt10">
            <div class="rounded-6  px-10 py-8 flex justify-between items-center">
              <div class="mr-6">
                <span class="c-[#333] text-14">需支付：</span>
                <span class="c-[#f00] text-16">￥{{ formatMoney(orderDetail.order_info.pay_amount) }}</span>
              </div>
              <nut-button type="primary" size="small" @click="toPay">立即支付</nut-button>
            </div>
          </div>
        </div>
      </div>
      <div class="overflow-hidden pt-12  radius-t-l-6 radius-t-r-6 relative top--6 bg-[#f8f8f8]">
        <div class="px-15" v-if="orderDetail.order_info.order_status === 1 && orderDetail.order_info.pay_status === 1">
          <div class="px-4 bg-white">
            <div class="rounded-6  px-10 py-8">
              <span class="c-[#333] text-14 mr-6  mb-5">距离预计出行时间仅剩
                <span class="theme-color text-18">{{residueDays}}</span> 天</span>
              <div class="c-[#999] text-13">请于<span class="theme-color">{{ orderDetail.depart_date&&sevenDayBefore(orderDetail.depart_date) }}</span>前完成签证材料预审及递交，避免耽误您的出行（您的预计出行时间为 <span>{{orderDetail.depart_date}}</span> ）</div>
            </div>
          </div>
        </div>
        <!-- v-if="orderDetail.order_info && orderDetail.order_info.order_status && orderDetail.order_info.order_status !== 1" -->
        <applicationPeopleStatus :applicantPeopleList="orderDetail.applicant_set" @toMaterialUpload="toMaterialUpload" />
        <div class="px-15 pt-15 mb-12 cell_container">
          <div class="bg-white rounded-6 py-10">
            <div class="pl-12 font-bold text-14">预订信息</div>
            <div class="flex justify-between px-12 items-center py-5">
              <div class="w-70 c-[#999] text-14  white-space">商品名称</div>
              <div class=" c-[#999] flex flex-1 items-center justify-between flex-wrap pl-10">
                <span class="c-[#333] text-14  text-ellipsis--l1">{{orderDetail.order_info.product_name}}</span>
                <div class="c-[#999] flex items-center text-14 white-space" @click="toVisaDetail">
                  详细
                  <RectRight width="14" />
                </div>
              </div>
            </div>
            <div class="flex justify-between px-12 pb-5">
              <div class="w-70 c-[#999] text-14">联系人</div>
              <div class="c-[#999] flex-1 ">
                <span class="c-[#333] text-14">{{orderDetail.order_info.contact_name}}</span>
                <p class="c-[#333] text-14">{{orderDetail.order_info.contact_number}}</p>
              </div>
            </div>
            <div class="flex justify-between px-12 pb-5">
              <div class="w-70 c-[#999] text-14 white-space pr-10">订单号</div>
              <div class="c-[#999] flex-1 flex items-center flex-wrap">
                <clipboard :copyContent="orderDetail.order_info.order_id" />
              </div>
            </div>
            <div class="flex justify-between px-12 pb-5">
              <div class="w-70 c-[#999] text-14 white-space pr-10">订单状态</div>
              <div class="c-[#999] flex-1 flex items-center flex-wrap">
                {{orderDetail.order_info && orderDetail.order_info.order_status && orderStatus(orderDetail.order_info.order_status,orderDetail.order_info.pay_status)}}
              </div>
            </div>
            <div class="flex justify-between px-12">
              <div class="w-70 c-[#999] text-14">创建时间</div>
              <div class="c-[#999] flex-1 flex items-center">
                <span class="c-[#333] text-14">{{orderDetail.order_info.create_time}}</span>
              </div>
            </div>
            <div class="flex justify-between px-12" v-if="orderDetail.order_info.pay_status === 1">
              <div class="w-70 c-[#999] text-14">支付时间</div>
              <div class="c-[#999] flex-1 flex items-center">
                <span class="c-[#333] text-14">{{orderDetail.order_info.pay_time}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="px-15 pt-15 mb-12 cell_container">
          <div class="bg-white rounded-6 py-5">
            <div class="pl-12 font-bold text-14">费用信息</div>
            <div class="flex justify-between px-12 items-center">
              <div class="w-70 c-[#999] text-14">付款总额</div>
              <div class=" c-[#999] flex flex-1 items-center justify-between">
                <span class="c-[#f00] text-16">￥{{ formatMoney(orderDetail.order_info.pay_amount*orderDetail.applicant_set.length) }}</span>
                <!-- <div class="c-[#999] text-14 flex items-center">
                详细
                <RectRight width="14" />
              </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="px-15 pt-15 mb-12 cell_container">
          <div class="bg-white rounded-6 py-10">
            <div class="flex justify-between px-12 items-center py-5 justify-between">
              <div class="w-70 c-[#333] font-bold text-14">温馨提示</div>
              <div class=" c-[#999] flex items-center justify-between" @click="openTipsDetail">
                <span class="c-[#999] text-14">
                  查看全部
                </span>
                <RectRight width="14" />
              </div>
            </div>
            <p class="text-ellipsis--l3 px-14 mt-6 text-14">1.办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期</p>
          </div>
        </div>
      </div>
    </div>
  </AppPage>
  <div class="w-full px-15 box-border fixed bottom-0 left-0  bg-white py-15" v-if="orderDetail.order_info.order_status === 4">
    <div class="w-full  box-border" @click="createOrder">
      <nut-button :block="true" type="info">邮寄资料</nut-button>
    </div>
  </div>
  <datePick ref="selectDateTime" v-model:value="orderDetail.travelTime" />
  <nut-popup position="bottom" :style="{ width: '100%', height: '70%' }" v-model:visible="tipsDetailShow">
    <div class="px-15 pt-15 text-center">温馨提示</div>
    <div class="px-15 py-15">{{tips}}</div>
  </nut-popup>
  <payPopup ref="payWayPop" :payAccount="orderDetail.order_info.pay_amount" :orderNo="route.query.orderNo" />
</template>

<script setup>
import dayjs from 'dayjs'
import { onMounted, reactive, ref } from 'vue'
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
import { Edit, Plus, Minus, RectRight } from '@nutui/icons-vue';
import { getProvinceAddress, addOrder } from '@/api/visa'
import { useRoute, useRouter } from 'vue-router'
import datePick from '@/components/datePick/index.vue'
import applicationPeopleStatus from '../components/orderDetail/applicationPeopleStatus.vue'
import clipboard from '@/components/clipboard/index.vue'
import { sevenDayBefore, formatDate } from '@/utils/common/common.js'
import { formatMoney } from '@/utils/common/money.js'
import { isEmpty } from '@/utils/common/is.js'
import { orderStatus, orderDetailStatusTips, visaType, identityTYpe, applicantStatusTips } from '@/utils/type/visa.js'
import { getOrderDetail, productDetailQuery, getMaterialUploadList } from '@/api/visa'
import { useVisaStore } from '@/store/modules/visa/index.js'
import { useUserStore } from '@/store/modules/user/index.js'
import payPopup from '@/components/payPopup/index.vue'
import { data } from './detail.js'
const route = useRoute()
const router = useRouter()
const orderDetail = reactive({
  status: 1,
  contact_name: '',
  contact_number: '',
  address: '',
  order_info: {
    pay_amount: '',
    order_status: '',
    pay_status: ''
  },
  applicant_set: []
})
orderDetail.travelTime = route.query.travelTime

let productList = ref([])
const payWayPop = ref()
const toPay = async () => {
  payWayPop.value.open()
}
let residueDays = ref(0)
const orderDetailFun = async () => {
  let params = {
    page: 1,
    pageSize: 10,
    userId: useUserStore().uId
  }
  const orderNo = route.query.orderNo
  if (!orderNo) return
  const { code, data } = await getOrderDetail(orderNo)
  if (+code === 200) {
    for (const key in data) {
      orderDetail[key] = data[key];
    }
    orderDetail.travelTime = '2023-12-22'
    let _formatDate = formatDate()
    const date1 = dayjs(orderDetail.travelTime)
    residueDays.value = date1.diff(_formatDate, 'day') // 7
  }

  // 模拟数据
  // for (const key in data) {
  //   orderDetail[key] = data[key]
  // }
  // let _formatDate = formatDate()
  // const date1 = dayjs(orderDetail.travelTime)
  // residueDays.value = date1.diff(_formatDate, 'day') // 7
}

const toMaterialUpload = async (applicantInfo, identityIndex) => {
  let product_id = orderDetail.order_info.product_id || 10159
  if (!product_id) return

  let p1 = new Promise((resolve, reject) => {
    productDetailQuery(product_id).then(res => {
      resolve(res)
    })
  })
  let p2 = new Promise((resolve, reject) => {
    const params = {
      userId: useUserStore().uId,
      visaOrderId: orderDetail.order_info.order_id,
      index: identityIndex,
    }
    // i
    getMaterialUploadList(params).then(res => {
      resolve(res)
    })
  })
  Promise.all([p1, p2]).then((res) => {
    let data = res[0].data
    let data2 = res[1].data
    try {
      let identityMaterial = {}
      let product_material = data.product_material
      product_material.forEach((item, index) => {
        if (item.identity_id === applicantInfo.identity_id) {
          let material = item.material
          for (const _key in material) {
            if (Array.isArray(material[_key]) && _key === 'elec_material') {
              material[_key].forEach(_item => {
                _item.fileList = []
                _item.type = 'elec_material'
                data2 && data2.forEach(val => {
                  if (+val.material_id === +_item.material_id) {
                    let file_name = val.file_name
                    let _fileList = []
                    file_name.forEach((_val, index) => {
                      _fileList.push({ file_name: _val, file_url: val.file_url[index] })
                    })
                    _item.fileList = _fileList
                  }
                })
              })
            } else {
              material[_key].fileList = []
              if (_key === 'application') {
                material[_key].type = 'application'
              } else if (_key === 'idphoto') {
                material[_key].type = 'idphoto'
              }
              data2 && data2.forEach(val => {
                if (val.material_id == _key) {
                  let file_name = val.file_name
                  let _fileList = []
                  file_name.forEach((_val, index) => {
                    _fileList.push({ file_name: _val, file_url: val.file_url[index] })
                  })
                  material[_key].fileList = _fileList
                }
              })
            }
          }
          identityMaterial = item
        }
      })

      // 把某个申请人的待上传资料及申请人的信息全部放在identityMaterial这个变量里面，上传文件后改变这里面的文件，提交资料也是从这里面的资料去提交，
      identityMaterial.order_id = orderDetail.order_info.order_id
      identityMaterial.orderNo = route.query.orderNo
      identityMaterial.identity_id = applicantInfo.identity_id
      identityMaterial.applicant_id = applicantInfo.applicant_id
      identityMaterial.applicant_name = applicantInfo.applicant_name
      identityMaterial.countryId = data.visa_country.countryId
      identityMaterial.identityIndex = identityIndex
      identityMaterial.product_id = orderDetail.order_info.product_id
      identityMaterial.applicant_status = applicantInfo.applicant_status
      console.log('%c [ identityMaterial ]-305', 'font-size:13px; background:#355b43; color:#799f87;', identityMaterial)

      useVisaStore().setIdentityMaterial(identityMaterial)
      window.localStorage.setItem('identityMaterial', JSON.stringify(identityMaterial))
      if (data2 && data2.length) {
        useVisaStore().setAlreadyUploadMaterial(data2)
      }

      //identityIndex 这个字段是代表是申请人的下表，上传文件要传这个参数，提交资料也要这个参数
      let params = {
        product_id: orderDetail.order_info.product_id,
        identityIndex: identityIndex,
        countryId: data.visa_country.countryId,
        applicant_name: applicantInfo.applicant_name,
      }
      router.push({ path: '/materialUpload', query: params })
    } catch (error) {

    }
  }).catch((error) => {
  })


}
const toVisaDetail = async () => {
  let params = {
    product_id: orderDetail.order_info.product_id
  }
  router.push({ path: '/visaDetail', query: params })
}

const selectDateTime = ref('')
const selectTravelTime = () => {
  selectDateTime.value.open()
}
const tipsDetailShow = ref(false)
const openTipsDetail = () => {
  tipsDetailShow.value = true
}

let tips = ref('办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期办理周期')

onMounted(async () => {
  await orderDetailFun()

})
</script>
<style scoped>
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
.cell_container /deep/ .nut-cell__title {
  flex: none;
}
</style>
<style lang="scss" scoped>
.city {
  line-height: 32px;
  border: 1px solid #ddd;
}
.city.active {
  line-height: 32px;
  border: 1px solid #f00;
}
</style>